/**
 * Created by wang on 2017/5/7.
 */
import React , { Component } from "react";
import ReactDOM from "react-dom";
import Header from "./header";
import Footer from "./footer";

export default class Home extends Component {

	constructor(){
		super();

	};

	componentDidMount(){
		let left = document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs.banner),null).left;
		console.log(left);
	};

	render() {
		let liArr = this.props.data.imgs.map( ( item , index ) => {
			return ( <li key={ index } className="banner-img">
							<img src={ "resource/img/" + item }/>
					 </li> );	 
		});
		
		return (
			<div>
				<Header title={this.props.data.title} />
				<div className="clear"></div>
				<div className="banner">
					<div className="banner-second">
						<ul className="banner-container" ref="banner">
							{ liArr }
						</ul>
					</div>
				</div>
				<div className="advertise"> 
					<div className="advertise-part lt">
						<img src="resource/img/company.png" />
					</div>
					<div className="advertise-part lt advertise-space">
						<img src="resource/img/example.png" />
					</div>
					<div className="advertise-part lt advertise-space">
						<img src="resource/img/pro.png" />
					</div>
					<div className="advertise-part lt advertise-space">
						<img src="resource/img/server.png" />
					</div>
					<div className="advertise-part lt advertise-space">
						<img src="resource/img/contact.png" />
					</div>
				</div>
				<div className="clear"></div>
				<div className="news">
					<div className="lt">
						<img src="resource/img/index_news.png"/>
					</div>
					<div className="lt news-part">
						<div className="lt news-container">
							<h4 className="news-title">最新动态</h4>
							<ul>
								<li className="news-content clip"><i className="rt">2017-12-20</i>>>热烈祝贺艺园坊官网成功上线!</li>
								<li className="news-content clip"><i className="rt">2017-12-20</i>>>热烈祝贺艺园坊官网成功上线!</li>
								<li className="news-content clip"><i className="rt">2017-12-20</i>>>热烈祝贺艺园坊官网成功上线!</li>
								<li className="news-content clip"><i className="rt">2017-12-20</i>>>热烈祝贺艺园坊官网成功上线!</li>
								<li className="news-content clip"><i className="rt">2017-12-20</i>>>热烈祝贺艺园坊官网成功上线!</li>
							</ul>
						</div>
						<div className="lt news-contact">
							
						</div>
					</div>
				</div>
				<div className="clear"></div>
				<Footer />
			</div>
		);
	}
}
